<template>
  <div v-loading="loading">
    <el-form :model="formData" size="small" label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="请求协议">
            <el-input v-model="formData.agreement"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="账号">
            <el-input v-model="formData.username" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="密码">
            <el-input v-model="formData.password" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="IP">
            <el-input v-model="formData.ip" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="端口">
            <el-input v-model="formData.port"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="通道">
            <el-input v-model="formData.channel" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="开始时间">
            <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="formData.startDate" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="结束时间">
            <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="formData.endDate" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col style="text-align: right">
          <el-form-item label-width="0">
            <el-button type="primary" @click="searchHandle" size="small" style="width: 150px">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData" height="500" border stripe>
      <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
      <el-table-column label="文件名" prop="name" min-width="250" align="center"></el-table-column>
      <el-table-column label="开始时间" prop="startTime" min-width="200" align="center"></el-table-column>
      <el-table-column label="结束时间" prop="endTime" min-width="200" align="center"></el-table-column>
      <el-table-column label="文件大小" prop="fileSize" width="150" align="center"></el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="{row}">
          <el-button type="text" @click="playBackHandle(row)" style="padding: 0">播放</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog
        title="回放视频"
        :visible.sync="dialogVisible"
        width="90%"
        top="5vh"
        append-to-body
        destroy-on-close
        @close="closeFun"
    >
      <el-form :model="videoBasicInfo" inline label-width="80px">
        <el-form-item label="开始时间">
          {{videoBasicInfo.startTime}}
        </el-form-item>
        <el-form-item label="结束时间">
          {{videoBasicInfo.endTime}}
        </el-form-item>
      </el-form>
      <div>
        <video id="videoToFlv" class="videoPlay-box" style="width: 100%;height: 590px" muted playsinline controls></video>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import flvjs from 'flv.js'
import {videoBackList} from "@/api/videoPlay";
import dayjs from "dayjs";

export default {
  name: "videoPlayBack",
  data(){
    return {
      formData:{
        agreement: "http",
        channel: "1",
        endDate: '',
        ip: "192.168.11.13",
        maxResults: 100,
        password: "ucan1588",
        port: "80",
        startDate: '',
        username: "admin"
      },
      loading: false,
      tableData: [],
      dialogVisible:false,
      videoBasicInfo:{
        playbackUrl: '',
        startTime: '',
        endTime: ''
      },
      flvPlayer: null
    }
  },
  mounted() {
    if (this.$route.query) {
      this.formData = Object.assign(this.formData, this.$route.query)
      this.formData.startDate = dayjs(new Date()).format('YYYY-MM-DD')
      this.formData.endDate =  dayjs(new Date()).format('YYYY-MM-DD')
      this.formData.port = 80
      this.searchHandle()
    }
  },
  methods:{
    init(data){
      console.log(data)
      this.formData = Object.assign(this.formData, data)
      this.formData.startDate = dayjs(new Date()).format('YYYY-MM-DD')
      this.formData.endDate =  dayjs(new Date()).format('YYYY-MM-DD')
      this.formData.port = 80
      this.searchHandle()
    },
    searchHandle(){
      console.log(this.formData, '----');
      const params = {
        ...this.formData,
        startDate: this.formData.startDate + ' 00:00:00',
        endDate: this.formData.endDate + ' 23:59:59'
      }
      this.loading = true
      videoBackList(params).then(res=>{
        console.log(res, '==============')
        if (res.code === 0){
          this.tableData = JSON.parse(JSON.stringify(res.data.result))
        }else{
          this.$message.warning('未搜索到数据')
        }
      }).finally(()=>{
        this.loading = false
      })
    },
    playBackHandle(row){
      this.videoBasicInfo = Object.assign(this.videoBasicInfo, row)
      this.videoBasicInfo.playbackUrl = row.playbackUrl
      this.dialogVisible = true
      this.$nextTick(()=>{
        this.webRtcServer = new WebRtcStreamer("videoToFlv", webrtcConfig.url);
        this.webRtcServer.connect(this.videoBasicInfo.playbackUrl,undefined,undefined);
        fetch(webrtcConfig.url + "/api/version").then(r => r.text()).then( (response) => {
        });
      })
      console.log(row)
    },
    closeFun(){
      this.videoBasicInfo.playbackUrl = ''
    },
  }
}
</script>

<style scoped lang="scss">

</style>
